import React, { Component } from "react";

// react-router里面一切皆组件
// 如果项目要使用路由，那么所有跟路由有关的内容，都要放在BrowserRouter组件的里面
// Link表示用于切换url的a标签
// Switch用于将包容性改成排他性路由
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";

// react的路由默认是history模式
// react的路由默认是包容性路由，vue的路由是排他性路由
// react的路由默认是模糊匹配，可以使用exact属性将他转成精准匹配

class Home extends Component {
  render() {
    return <div>这是首页页面</div>;
  }
}

const About = () => {
  return <div>这是关于页面</div>;
};

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <h2>路由-basic</h2>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于页</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;
